<template>
  <div ref="appContainer" class="app-container flex-col">
    <el-row class="custom" :gutter="10">
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="grid-content">
          <div class="title">导航服务费(元)</div>
          <div class="right">
            <div class="h2"> {{ totalData.navService }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="grid-content">
          <div class="title">RTK服务费(元)</div>
          <div class="right">
            <div class="h2"> {{ totalData.droneRtk }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="grid-content">
          <div class="title">维修工单费用(元)</div>
          <div class="right">
            <div class="h2">{{ totalData.repairOrder }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="grid-content">
          <div class="title">橙心服务费用(元)</div>
          <div class="right">
            <div class="h2">{{ totalData.droneService }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="header flex-row">
      <ul class="flex-row">
        <li v-for="(item, index) in tabList" :key="index" :class="[activeIndex == index ? 'active' : '']" @click="switchTab(index)">
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div class="footer">
      <PropTable :loading="loading" :columns="baseColumns" :data="list" :total="total" :show-search-form="false" @on-submit="onSubmit">
      </PropTable>
    </div>
  </div>
</template>
<script lang="ts" setup name="paltform">
  import { getPlatFormList, getPlatTotal } from '@/api/paltform'
  import { getCurrentInstance } from 'vue'
  import { columns } from './constants'
  const loading = ref(false)
  const appContainer = ref(null)
  const totalData = reactive({
    navService: 0, //导航
    droneRtk: 0,
    repairOrder: 0,
    droneService: 0,
  })
  const total = ref(0)
  const tabList = ref([
    { label: '全部', key: 0 },
    { label: '今日', key: 1 },
    { label: '本周', key: 2 },
    { label: '本月', key: 3 },
    { label: '本年', key: 4 },
  ])
  let baseColumns = reactive(columns)
  const payTime = ref('')
  const { proxy } = getCurrentInstance() as any
  const getTime = (key) => {
    const now = proxy.$dayjs()
    const startOfWeek = proxy.$dayjs().startOf('week')
    const endOfWeek = proxy.$dayjs().endOf('week')
    const startOfMonth = proxy.$dayjs().startOf('month')
    const endOfMonth = proxy.$dayjs().endOf('month')
    const startOfYear = proxy.$dayjs().startOf('year')
    const endOfYear = proxy.$dayjs().endOf('year')

    switch (key) {
      case 0:
        payTime.value = '' //全部
        return
      case 1:
        payTime.value = `${now.format('YYYY-MM-DD') + ' 00:00:00'},${now.format('YYYY-MM-DD') + ' 23:59:59'}` //今日
        return
      case 2:
        payTime.value = `${startOfWeek.format('YYYY-MM-DD HH:mm:ss')},${endOfWeek.format('YYYY-MM-DD HH:mm:ss')}`
        return
      case 3:
        payTime.value = `${startOfMonth.format('YYYY-MM-DD HH:mm:ss')},${endOfMonth.format('YYYY-MM-DD HH:mm:ss')}`
        return
      case 4:
        payTime.value = `${startOfYear.format('YYYY-MM-DD HH:mm:ss')},${endOfYear.format('YYYY-MM-DD HH:mm:ss')}`
        return
    }
  }
  const activeIndex = ref(0)
  const switchTab = (index) => {
    activeIndex.value = index
    getTime(index)
    getList({ pageNum: 1, pageSize: 20 })
    getTotal()
  }
  //获取平台流水信息
  const getList = (val = {}) => {
    getPlatFormList({ ...val, payTime: payTime.value, orderFrom: 'AgriApp' }).then((res) => {
      list.value = res.records
      total.value = res.total
    })
  }
  //获取平台统计数据
  const getTotal = () => {
    getPlatTotal({ payTime: payTime.value, orderFrom: 'AgriApp' }).then((res) => {
      totalData.navService = res.navService.priceActual || 0
      totalData.droneRtk = res.droneRtk.priceActual || 0
      totalData.droneService = res.droneService.priceActual || 0
      totalData.repairOrder = res.repairOrder.priceActual || 0
    })
  }
  const list = ref([])
  const onSubmit = (val) => {
    const data = JSON.parse(JSON.stringify(val))
    getList(data)
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
  //
  onMounted(() => {
    switchTab(0)
  })
</script>

<style scoped lang="scss">
  .custom {
    margin-bottom: 10px;
  }
  .header {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 0 16px;
    padding-bottom: 10px;
    font-size: 16px;
    margin-bottom: 10px;
    li {
      padding: 16px 0;
      margin: 0 16px;
      cursor: pointer;
    }
    .active {
      color: #f18d22;
      border-bottom: 3px solid #f18d22;
      font-weight: 700;
    }
  }
  .footer {
    flex: 1;
    display: flex;
    padding: 16px;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
    min-height: 300px;
    .pagination {
      width: 100%;
      display: flex;
      justify-content: center;
      padding-top: 20px;
      box-sizing: border-box;
    }
  }
  .table {
    position: relative;
    flex: 1;
  }
  .zb-table {
    position: absolute;
    height: 100%;
  }
  .grid-content {
    display: flex;
    border-radius: 8px;
    background-color: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
    .title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      line-height: 22px;
    }
    .h2 {
      height: 38px;
      margin-top: 4px;
      margin-bottom: 0;
      overflow: hidden;
      color: rgba(0, 0, 0, 0.88);
      font-size: 30px;
      line-height: 38px;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
    }
  }
</style>
